<script setup>
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { Lock, User } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { userLoginService, userRegisterService } from '@/api/user.js'
import { useUserStore } from '@/stores/modules/user.js'

const form = ref({
  username: 'limu',
  password: '123456',
  repassword: '',
  rememberMe: false
})

const isRegister = ref(false)

const unRegister = ref(true)
// 切换登录注册，清空表单内容
watch(isRegister, () => {
  form.value = {
    username: '',
    password: '',
    repassword: ''
  }
})

// vue3 组合式api中，使用useRouter()获取router
// 使用useRoute 获取路由参数
const router = useRouter()

const userStore = useUserStore()
const onLogin = async () => {
  let response = await userLoginService(form.value)
  userStore.setToken(response.data.token)
  router.replace('/')
}
const onRegister = async () => {
  let response = await userRegisterService(form.value)
  console.log(response)
  ElMessage({
    message: '注册成功！',
    type: 'success'
  })
}
const backLogin = () => {
  isRegister.value = false
  unRegister.value = true
}
const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== form.value.password) {
    callback(new Error('两次输入的密码不一致！'))
  } else {
    callback()
    unRegister.value = false
  }
}
const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 15, message: '用户名长度在3到15个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入用户密码', trigger: 'blur' },
    { min: 6, max: 10, message: '用户密码长度在6到10个字符', trigger: 'blur' },
    { pattern: /^\S{6,10}$/, message: '用户密码必须为6到10个非空字符' }
  ],
  repassword: [{ validator: validatePass, trigger: 'change' }]
}
</script>
<template>
  <el-row style="height: 100%">
    <el-col :span="12" class="background-image"></el-col>
    <el-col :span="12">
      <el-row style="height: 100%" align="middle">
        <el-col :span="10" :offset="6">
          <el-form :model="form" label-width="auto" labelPosition="left" :rules="rules">
            <el-form-item>
              <h1 v-if="!isRegister">登录</h1>
              <h1 v-else>注册</h1>
            </el-form-item>
            <el-form-item label="用户名" prop="username">
              <el-input :prefix-icon="User" v-model="form.username" />
            </el-form-item>
            <el-form-item label="用户密码" prop="password">
              <el-input :prefix-icon="Lock" type="password" v-model="form.password" />
            </el-form-item>
            <el-form-item label="确认密码" v-show="isRegister" prop="repassword">
              <el-input :prefix-icon="Lock" type="password" v-model="form.repassword" />
            </el-form-item>
            <el-form-item v-show="!isRegister">
              <div
                style="
                  width: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                "
              >
                <el-checkbox v-model="form.rememberMe" label="记住我" size="large" />
                <el-button type="primary" text>忘记密码?</el-button>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onLogin" style="width: 100%" v-if="!isRegister"
                >登录</el-button
              >
              <el-button
                :disabled="unRegister"
                type="primary"
                @click="onRegister"
                style="width: 100%"
                v-else
                >注册</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-link :underline="false" type="info" @click="isRegister = true" v-if="!isRegister"
                >注册→</el-link
              >
              <el-link :underline="false" type="info" @click="backLogin" v-else>←返回</el-link>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<style scoped>
#form {
  padding: 100px;
  box-shadow: var(--el-box-shadow-dark);
}
.background-image {
  //width: 100%; /* 设置div的宽度 */
  //height: 100%; /* 设置div的高度 */
  background-image: url('@/assets/0.jpeg'); /* 设置背景图片 */
  background-size: cover; /* 背景图片覆盖整个div区域 */
  background-position: center; /* 背景图片居中 */
  border-radius: 10px;
}
</style>
